// 注释
/* 普通注释  会保留到编译后的文件中 */
// 静默注释  只保留在SASS源文件中，编译后被省略。


// 变量
// 变量名以$开头(变量:值;)  
// 解析: 在scss文件中可以提前定义变量,存储公共数据 ,scss文件便以为css是 会被替换为对应的值

// 用法
// 1. 存储公共数据
// 2. 变量可以和 css选择器,css属性名,css属性值拼接(插值语句)

$hot: #f10215;
$grey: #999;
$success: #99CCCC;
$cool: #0099CC;
$warm: #FFCCCC;
$live: #FF9999;

$typeArea: 1226px; //版心宽度

$side: left;





// 计算 (+ - * / %)
// scss文件中可以进行数值运算 => 编译时会直接输出运算的结果

// 加法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 减法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 乘法: 一个有单位,一个没有单位  
// 除法: 一个有单位,一个没有单位  或者 两个都有单位(单位舍去 倍数  200px/2px => 100)


// 函数  => sass中允许自定义函数
@function pxtorem($val) {
    // @return calc($val/100px)*1rem;
    @return #{calc($val/100px)}rem;
}


// 混合(mixin) => 是可以重用的代码块。

// 1. 先定义混合代码
// 语法:  
// @mixin 代码块名称 {
//     css代码段
// }

// 2. 使用混合代码段
// 借助关键词  @include 代码块名称;

// 注意:
// 1. mixin代码块 在解析为css过程中,会将代码块的代码复制一份到引入的css选择器中
// 1. mixin的强大之处，在于可以指定参数和默认值。

// 对比 继承和混合
// 1. 继承一般继承现有的类,子类继承父类. 也可以先提取公共类 => 统一做继承用 => 解析结果时 群组选择器
// 2. 混合需要先定义公共代码段,然后在引入使用 => 解析时会复制一份, 且 混合指定参数和默认值 




// @mixin typeAreaCenter {
//     width: $typeArea;
//     margin: 0 auto;
// }

// .header {
//     @include typeAreaCenter();
// }

// .container {
//     @include typeAreaCenter();
// }

// .banner {
//     @include typeAreaCenter();
// }

// .footer {
//     @include typeAreaCenter();
// }


@mixin blockCenter($wd: $typeArea) {
    width: $wd;
    margin: 0 auto;
}

.header {
    @include blockCenter(1024px);
}

.container {
    @include blockCenter(750px);
}

.banner {
    @include blockCenter(320px);
}

.footer {
    @include blockCenter();
}